<template>
  <div class="home-container" v-if="isShow">
    <van-nav-bar title="购票系统" fixed />
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="Mine-categories-swipe">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-notice-bar
  left-icon="volume-o"
  text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
/>
    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
      <ArticleItem v-for="item in artlist" :key="item.id" :article="item" @Detail2="Detail2"></ArticleItem>
    <!-- </van-list> -->
    <!-- <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ArticleItem v-for="item in artlist" :key="item.art_id" :article="item"></ArticleItem>
      </van-list>
    </van-pull-refresh> -->
  </div>
  <div v-else>
    <!-- @是点击事件，点击事件，俩个相等一般都是子给父传属性的 -->
    <homeDetail @onClickLeft="onClickLeft" :movieDetail="movieDetail"></homeDetail>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import request from '@/utils/request.js'
import homeDetail from '@/views/Home/homeDetail'
import ArticleItem from '@/components/Article/ArticleItem.vue'
// 鲁大师 提供了许多牛逼的函数 节流的函数、防抖的函数、操作数组的一系列函数、操作对象的一系列函数（对象的深拷贝、浅拷贝）
// import _ from 'lodash'
// let fn = null

export default {
  name: 'Home',
  components: {
    ArticleItem,
    homeDetail,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      isShow: true,
      id: '',
      value: '',
      images: [
        require('@/assets/picture/1.png'),
        require('@/assets/picture/2.png'),
        require('@/assets/picture/3.png')
      ],
      artlist: [],
      movieDetail: ''
    }
  },
  created() {
    // 全部定义好属性吃屎化属性调用这些
    this.initArticleList()
    this.selectMovie()
  },
  methods: {
    // 获取列表给artlish赋值
    async initArticleList() {
      const { data: res } = await request.get('/my/movie/cates')
      console.log(res)
      if (res.status === 0) {
        this.artlist = res.data
      }
    },
    // 搜索框
    async selectMovie() {
      const { data: res } = await request.get('/my/movie/search', {
        params: {
          // movie_name,seat,price,ordertime,username
          input: this.value
        }
      })
      if (res.status === 0) {
        this.artlist = res.data
      }
      console.log(res)
    },
    // 判断选座位页面是否出现
    Detail2(val) {
      this.isShow = false
      this.id = val
      // this.movieDetail = this.artlist[]
      this.artlist.forEach(item => {
        if (item.id === this.id) {
          this.movieDetail = item
        }
      })
    },
    onClickLeft(val) {
      this.isShow = val
    }
  },
  // watch监听属性改变改变就触发，每搜一次就触发value v-model双向绑定
  watch: {
    value(newval, oldval) {
      this.selectMovie()
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding-top: 46px;
  padding-bottom: 50px;
}
.my-swipe .van-swipe-item {
    width: 100%;
    height: 100px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
  }
.Mine-categories-swipe img{
    display: inline-block;
    width: 100%;
    height: 150px;
}
</style>
